<!-- 数据操作组件 -->
<template>
  <a-modal :title="title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="close" :width="999"
    :destroyOnClose="true">
    <a-form-model ref="ruleForm" :model="model" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="协议名称" ref="name" prop="name">
        <a-input placeholder="请输入协议名称" allowClear v-model="model.name" />
      </a-form-model-item>
      <a-form-model-item label="协议KEY" ref="dataKey" prop="dataKey">
        <a-input placeholder="请输入协议KEY" allowClear v-model="model.dataKey" />
      </a-form-model-item>
      <a-form-model-item label="使用渠道" ref="useSource" prop="useSource">
        <a-select v-model="model.useSource">
          <a-select-option v-for="(item, index) in useSource" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="状态是否正常" ref="useStatus" prop="useStatus">
        <aSelectTorF v-model="model.useStatus" allowClear></aSelectTorF>
      </a-form-model-item>
      <a-form-model-item label="协议内容" ref="content" prop="content">
        <aTinymce v-model="model.content"></aTinymce>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { model, rules, useSource } from "./save";
import { cleanObject } from "@/utils/CommonUtil";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Modal",
  // 子组件参数列表
  props: {},
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      api: {
        detail: "/admin_server/agreement/", // 详情
        save: "/admin_server/agreement/save", // 新增
        update: "/admin_server/agreement/update", // 修改
      },
      title: "",
      visible: false, // 数据操作组件是否打开
      disabled: false, // 是否禁用更改数据
      confirmLoading: false, // 提交按钮loading
      model, // 数据传输模型
      rules, // 数据输入校验
      labelCol: { span: 4 }, // label占位尺寸
      wrapperCol: { span: 18 }, // 输入框占位尺寸
      useSource,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          if (this.model.id) {
            this.$request.post2(this.api.update, this.model).then((res) => {
              if (res.success) {
                this.$message.success("更新成功");
                this.$emit("handleOk");
              }
              this.confirmLoading = false;
            });
          } else {
            this.$request.post2(this.api.save, this.model).then((res) => {
              if (res.success) {
                this.$message.success("添加成功");
                this.$emit("handleOk");
              }
              this.confirmLoading = false;
            });
          }
        }
      });
    },
    resetForm() {
      cleanObject(this.model);
      this.model.useSource = 1;
    },
    async init(id, title) {
      this.title = title;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
      this.disabled = false;
      if (id) {
        this.confirmLoading = true;
        this.model.id = id;
        this.disabled = true;
        await this.$request.get1(this.api.detail + id).then((res) => {
          if (res.success) {
            Object.assign(this.model, res.result);
          }
          this.confirmLoading = false;
        });
      } else {
        this.resetForm();
      }
    },
    close() {
      this.visible = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style></style>